資訊的整理：清單與表格

2025 iThome 鐵人賽

DAY 3

自我挑戰組

網頁設計自我挑戰 - 從零開始系列第 3 篇

17th鐵人賽清單表格

Bao

2025-08-10 01:48:54

158 瀏覽

分享至

一個好的網頁不只是把所有東西都堆在一起，如何有效地整理資訊也很重要。今天我要學習兩種強大的工具：清單和表格，它們能讓資訊變得有條理、易於閱讀。

清單標籤：
- 無序清單 <ul>：用來列出沒有特定順序的項目。例如，興趣愛好、購物清單等。每個項目都用 <li> (list item) 標籤包起來。
- 有序清單 <ol>：用來列出有特定順序的項目。例如，步驟教學、排名等。同樣，每個項目都用 <li> 標籤。
表格標籤 <table>：
- 用來呈現結構化的數據，像課程表、產品規格等。
- <thead>：表格標題區。
- <tbody>：表格主體區。
- <tr>：表格中的每一行 (row)。
- <th>：表格標題儲存格 (header)。
- <td>：表格數據儲存格 (data)。

我用清單和表格來呈現我的興趣和課程表。

HTML

<body>
  <h1>我的興趣</h1>
  <ul>
    <li>追劇</li>
    <li>看電影</li>
    <li>打羽球</li>
  </ul>

  <h1>我的課程表</h1>
  <table>
    <thead>
      <tr>
        <th>時間</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>上午</td>
        <td>國文</td>
        <td>學涯規劃</td>
        <td>程式設計</td>
        <td>軟體工程</td>
        <td>離散數學</td>
      </tr>
      <tr>
        <td>下午</td>
        <td>計算機概論</td>
        <td>體育</td>
        <td>軟體工程</td>
        <td></td>
        <td>線性代數</td>
      </tr>
    </tbody>
  </table>
</body>

透過這些標籤，網頁已經能呈現更多樣化的內容。但這個網頁看起來還是很樸素，明天要讓網頁的造型師 - CSS，來讓它變得更美觀。

執行成果 :